<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>修改角色</title>
    {% load static %}
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/css/oksub.css">
    <script type="text/javascript" src="/static/lib/loading/okLoading.js"></script>
    <script src="/static/lib/layui/layui.js"></script>

    <link type="text/css" rel="stylesheet" href="/static/css/metroStyle.css">
    <link type="text/css" rel="stylesheet" href="/static/css/treeSelectStyle.css">
    <script src="/static/js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.ztree.all.js"></script>
    <script type="text/javascript" src="/static/js/treeSelect.2.0.js"></script>
    <script type="text/javascript" src="/static/js/xm-select.js"></script>
    <script type="text/javascript" src="/static/js/xeutils.js"></script>
</head>

<body>
    <div class="ok-body">
        <!--form表单-->
        <form class="layui-form layui-form-pane ok-form">
            {% csrf_token %}
            <div class="layui-row layui-col-space10">

                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">员工姓名<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="name" placeholder="请输入员工姓名！" autocomplete="off"
                            class="layui-input" lay-verify="required">
                        <input type="text" name="id" id="id" class="layui-input" style="display: none">
                    </div>
                </div>
                <div class="layui-inline layui-col-md6">

                    <label class="layui-form-label">所属角色<span style="color: red">*</span></label>
                    <div class="layui-input-block" name="has_role" id="has_role">

                    </div>

                </div>
            </div>
            <div class="layui-row layui-col-space10" style="padding-top: 10px;">
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">邮箱<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="email" id="email" placeholder="请输入序号！(正整数)" autocomplete="off"
                            class="layui-input" lay-verify="required|email">
                    </div>
                </div>
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">手机号<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="mobile" id="mobile" placeholder="请输入手机号" autocomplete="off"
                            class="layui-input" lay-verify="required|phone">
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space10" style="padding-top: 10px;">
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">员工性别<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="radio" name="gender" value="0" title="男">
                        <input type="radio" name="gender" value="1" title="女">
                    </div>
                </div>
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">员工状态<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="radio" name="is_active" value="0" title="离职">
                        <input type="radio" name="is_active" value="1" title="在职">
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space10" style="padding-top: 10px;">
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">所属部门<span style="color: red">*</span></label>
                    <div class="layui-input-block" name="has_dept" id="has_dept">

                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text" style="padding-top: 10px;">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="description" id="description" placeholder="请输入备注内容"
                        class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary" id="close">关闭</button>
                </div>
            </div>
        </form>
    </div>
    <!--js逻辑-->


    <script type='text/javascript'>
        let data1;
        function child(d) {
            data1 = d;
            layui.use(["form", "okUtils", "form", "tree", "okLayer"], function () {
                let $ = layui.$;
                let form = layui.form;
                let okUtils = layui.okUtils;
                let okLayer = layui.okLayer;
                let tree = layui.tree;
                let util = layui.util;
                okLoading.close();
                $('#id').val(data1.id);
                $('#name').val(data1.name);
                $('#mobile').val(data1.mobile);
                $('#email').val(data1.email);
                $('#gender').val(data1.gender);
                $('#description').val(data1.description);
                if (data1.gender == 0) {
                    $('div.layui-unselect.layui-form-radio')[0].click();
                } else if (data1.gender == 1) {
                    $('div.layui-unselect.layui-form-radio')[1].click();
                }
                if (data1.is_active == false) {
                    $('div.layui-unselect.layui-form-radio')[2].click();
                } else if (data1.is_active == true) {
                    $('div.layui-unselect.layui-form-radio')[3].click();
                }
                form.render();
                // 回显下拉框
                var defDeptValue;
                var defRoleValue;
                if(data1.roles_id===null){
                    defRoleValue=[];
                }else{
                    defRoleValue=data1.roles_id
                }
                if(data1.dept_id===null){
                    defDeptValue=[];
                }else{
                    defDeptValue=data1.dept_id
                }
                var demo3 = xmSelect.render({
                    el: '#has_role',
                    model: { label: { type: 'text' } },
                    name: 'role',
                    radio: true,
                    initValue: defRoleValue,
                    layVerify: 'required',
                    paging: true,
                    pageSize: 5,
                    prop: {
                        name: 'name',
                        value: 'id',
                    },
                    tree: {
                        show: false,
                        strict: false,
                    },
                    height: 'auto',
                    data() {
                        return []
                    }
                });
                $.ajax({
                    url: "{% url 'system:getRoleData' %}",
                    type: "GET",
                    success: function (ret) {
                        var node = ret.data;
                        demo3.update({
                            data: node,
                            autoRow: true,
                        })
                    },
                    error: function () {
                    }
                });
                var demo2 = xmSelect.render({
                    el: '#has_dept',
                    name: 'dept',
                    initValue: [defDeptValue],
                    model: { label: { type: 'text' } },
                    layVerify: 'required',
                    radio: true,
                    clickClose: true,
                    prop: {
                        name: 'title',
                        value: 'id',
                    },
                    tree: {
                        show: true,
                        strict: false,
                        expandedKeys: [-1],
                    },
                    height: 'auto',
                    data() {
                        return []
                    }
                });
                $.ajax({
                    url: "{% url 'system:getDeptDataTree' %}",
                    type: "GET",
                    success: function (res) {
                        var node = res;
                        demo2.update({
                            data: XEUtils.toArrayTree(node.data,{ id:'id',parentKey: 'parent', strict: true, children:'children' }),
                            autoRow: true,
                        })
                    },
                    error: function () {
                    }
                });
                // 这里得把switch的状态弄对，不然，如果他创建就停用，数据就传不过去了
                form.on("submit(edit)", function (data) {
                    okUtils.ajax("/system/editUserData/" + data.field.id, "post", data.field, true).done(function (response) {
                        okLayer.greenTickMsg(response.msg, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        });
                    }).fail(function (error) {
                        // 这里已经有提示了
                    });
                    return false;
                });
                $("#close").click(function () {
                    let index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
                    parent.layer.close(index);
                });
            })
        };
    </script>
</body>

</html>